
<template>
  <div
    class="form-group"
    :class="classes"
  >
    <div class="form-group__title">
      <span v-if="title">{{ title }}</span>
      <slot name="label" />
    </div>
    <div
      class="form-group__content"
      :class="layoutClasses"
    >
      <slot />
    </div>
    <slot name="footer" />
  </div>
</template>

<script>
export default {
  name: 'FormGroup',
  props: {
    title: {
      type: [String, Number],
      default: ''
    },
    size: {
      type: String,
      default: ''
    },
    contentLayout: {
      type: String,
      default: ''
    }
  },
  data() {
    return {}
  },
  computed: {
    classes() {
      if (this.size) {
        return `form-group--${this.size}`
      }
      return ''
    },
    layoutClasses() {
      if (this.contentLayout) {
        return `form-group__content--${this.contentLayout}`
      }
      return ''
    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.form-group {
  display: flex;
  flex-direction: column;
  &__title {
    border-bottom: 1px solid #f6f6f6;
    margin-bottom: 20px;
    font-size: 14px;
    color: #333;
    line-height: 40px;
  }
  &__content {
    &--grid {
      display: grid;
      gap: 10px;
      grid-template-columns: repeat(auto-fill, calc(50% - 10px));
    }
  }
}
</style>
